<template>
  <!-- 展现方式： 能流图 -->
  <!-- <previewSimple class="p-energySimple" ref="_simple" ></previewSimple> -->
  <!-- 展现方式： 单线图 -->
  <div class="monitor-page">
    <previewSimple class="p-energySimple" ref="_simple" :chartType="chartType">
      <table-search
        :queryFormItem="queryFormItem"
        :collapseFormItem="collapseFormItem"
        :data="filter"
        :labelWidth="labelWidth"
        @handleSearch="handleSearch"
        @handleReset="handleReset"
      ></table-search>
    </previewSimple>
  </div>
</template>

<script>
import previewSimple from "./previewSimple";
import TableSearch from "public/components/table/parts/table-search";
import mixin from "@/pages/components/mixins/mixin";

export default {
  data() {
    return {
      id: 350,
      labelWidth: 80,
      pointOptions: [],
      filter: {
        scale: "天",
        beginTime: "",
        endTime: "",
      },
      scaleOptions: [
        { label: "分", value: "分" },
        { label: "时", value: "时" },
        { label: "天", value: "天" },
        { label: "月", value: "月" },
        { label: "年", value: "年" },
      ],
      chartType: "sankey", // simple sankey
    };
  },
  mixins: [mixin],
  components: { previewSimple, TableSearch },
  computed: {
    queryFormItem() {
      return [
        {
          key: "scale",
          title: {
            "zh-CN": "粒度",
            "en-US": "scale",
          }[this.G_Locale],
          minWidth: 100,
          align: "center",
          config: { type: "select", options: this.scaleOptions },
        },
        {
          key: "timeRange",
          title: {
            "zh-CN": "时间区间",
            "en-US": "timeRange",
          }[this.G_Locale],
          minWidth: 100,
          align: "center",
          config: { type: "datetimeRange" },
        },
      ];
    },
    collapseFormItem() {
      return [
        {
          key: "scale",
          title: {
            "zh-CN": "粒度",
            "en-US": "scale",
          }[this.G_Locale],
          minWidth: 100,
          align: "center",
          config: { type: "select", options: this.scaleOptions },
        },
        {
          key: "timeRange",
          title: {
            "zh-CN": "时间区间",
            "en-US": "timeRange",
          }[this.G_Locale],
          minWidth: 100,
          align: "center",
          config: { type: "datetimeRange" },
        },
      ];
    },
  },
  methods: {
    handleSearch(val) {
      console.log(val);
      if (val.timeRange && val.timeRange.length > 0) {
        this.filter.beginTime = val.timeRange[0];
        this.filter.endTime = val.timeRange[1];
      }

      this.$refs._simple.queryData(this.filter);
    },
		handleReset() {
			this.filter= {
        scale: "天",
        beginTime: "",
        endTime: "",
			}
			this.$refs._simple.queryData(this.filter);
		},
  },
  async mounted() {
    // 传入 在配置端维护的d单线图记录的ID;
    let params = this.$route.meta.params;

    if (params.type) {
      this.chartType = params.type;
    }
    if (params.id) {
      this.id = params.id;
    }

    await this.$refs._simple.init(parseInt(this.id));
    this.$refs._simple.queryData();
  },
};
</script>

<style lang="less">
.p-energySimple {
  background-color: #fff;
}
</style>
